<template>
    <div class="box">
      <Head></Head>
      <main>
        <el-table
    :data="dDList"
   
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <div>
          <!-- {{props.row.arr}} -->
          <ul>
             <li v-for="item,i in props.row.arr" :key="i">
               
                     <img :src="$image+item.food_img" alt="">
                    <p>{{item.name}}</p>
                    <p style="color:red;font-size:12px">￥<span style="font-size:15px">{{item.price}}</span></p>
                
                
             </li>
          </ul>
          <div style="display:flex;justify-content: space-between;
    align-items: center;margin-top:10px;">
            <p style="color:orange">{{props.row.username}}先生</p>
            <p style="color:green">{{props.row.phone}}</p>
       <p style="color:red;font-size:12px">总价￥<span style="font-size:15px">{{props.row.money}}</span></p>
          </div>
          <div v-if="props.row.isTrue_pei!=='未配送'" style="display:flex;justify-content: space-evenly;;
    align-items: center;margin-top:10px;">
            <p style="color:orange" >配送人员{{props.row.pei_people.name}}</p>
            <p style="color:green" >联系方式{{props.row.pei_people.phone}}</p>
          </div>
        </div>
        
      </template>
    </el-table-column>
    <el-table-column
      label="订单编号"
      prop="ding_Id">
    </el-table-column>
      <el-table-column
      label="订单配送地址"
      prop="address">
    </el-table-column>
     <el-table-column
      label="联系方式"
      prop="phone">
    </el-table-column>
     <el-table-column
      label="总价"
      prop="money">
    </el-table-column>
    <el-table-column
      label="订单时间"
      prop="time">
       
    </el-table-column>
    <el-table-column
      label="状态"
      prop="isTrue_pei">
       
    </el-table-column>
    
  
   
   
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">配送</el-button>
        
        <el-button
          size="small"
          
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

      
      </main>
      <el-pagination
            background
            @current-change="change"
            layout="prev, pager, next"
            :total="lastYe">
            </el-pagination>

           <section  v-show="bool" @click="bian">
                  <div class="bian">
                       <el-radio-group v-model="radio" @change="selectDian">
                        <el-radio :label="1">店员1</el-radio>
                        <el-radio :label="2">店员2</el-radio>
                        <el-radio :label="3">店员3</el-radio>
                      </el-radio-group>
                  </div>
            </section>
    </div>
</template>

<script>
import Head from '../components/head'
import {ajax_updateDing,ajax_deleteFood,ajax_dDList} from '../ajax/index'
export default {
   name: '',
    data(){
        return{
           dDList:[], 
           yeNum:1,
           lastYe:1,
           bool:false,
          
           
            value:'',
            imageUrl: '',
            Id:'',
            radio:1,
            ding_Id:0,
            zhuangTai:'配送',
            timer:''

        }
    },
    inject:['reload'],
    methods:{

      handleEdit(index, row) {
        console.log(index, row);
         this.bool=true;
        this.ding_Id=row.ding_Id
        console.log(row.Id)
      },
      selectDian(val){
        console.log(val)
        ajax_updateDing({
          ding_Id:this.ding_Id,
          pei_Id:val,
          isTrue_pei:1,
        }).then(res=>{
          console.log(res);
          if(res.code==1){
            this.reload();
            
          }
        })
      },
      handleDelete(index, row) {
        console.log(index, row);
         this.$confirm('此操作将永久删除该食品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           ajax_deleteFood({
          Id:row.Id
        }).then(data=>{
          if(data.code==0){
                this.$message.error(data.message);
          }else if(data.code==1){
            this.$message.error(data.message);
          }else if(data.code==2){
            this.$message.success(data.message);
          }
          
          this.reload()
        })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
        change(num){
            console.log(num)
            this.yeNum=num
             ajax_dDList(
            {
               yeNum:this.yeNum
            }
        ).then(data=>{
            // console.log(data.shopList);
            this.dDList=data.dDList;
            this.dDList.forEach((item,i,array)=>{
              if(item.isTrue_pei==0){
                item.isTrue_pei="未配送"
              }else if(item.isTrue_pei==1){
                item.isTrue_pei='配送中'
              }else if(item.isTrue_pei==2){
                item.isTrue_pei="配送完成"
              }
            })
            // console.log(this.dDList)
            this.lastYe=data.ye
            // console.log(data.ye)
        })
        },
         bian(e){
              // console.log(e.target)
             if(e.target.tagName=="SECTION"){
              //  console.log("fei")
               this.bool=false
               console.log(this.bool)
             }
        },
        qu(){
            this.bool=false
        },
         onSubmit(){
         
        },
        
        
    },
    updated(){
        setInterval(() => {
          this.change(1);
        }, 10*1000);
    },
    created(){
        ajax_dDList(
            {
               yeNum:this.yeNum
            }
        ).then(data=>{
            // console.log(data.shopList);
            this.dDList=data.dDList;
            this.dDList.forEach((item,i,array)=>{
              if(item.isTrue_pei==0){
                item.isTrue_pei="未配送"
              }else if(item.isTrue_pei==1){
                item.isTrue_pei='配送中'
              }else if(item.isTrue_pei==2){
                item.isTrue_pei="配送完成"
              }
            })
            // console.log(this.dDList)
            this.lastYe=data.ye
        }),
        this.timer=setInterval(() => {
            ajax_dDList(
              {
                yeNum:this.yeNum
              }
          ).then(data=>{
              // console.log(data.shopList);
              this.dDList=data.dDList;
              this.dDList.forEach((item,i,array)=>{
                if(item.isTrue_pei==0){
                  item.isTrue_pei="未配送"
                }else if(item.isTrue_pei==1){
                  item.isTrue_pei='配送中'
                }else if(item.isTrue_pei==2){
                  item.isTrue_pei="配送完成"
                }
              })
              // console.log(this.dDList)
              this.lastYe=data.ye
          })
        }, 6*1000);
       
    },
    beforeUpdate(){
        
    },
    updated(){
        
    },
    beforeDestroy(){
         clearInterval(this.timer)
       this.timer=''
    },
    destroyed(){
     
    },
    components:{
        Head,
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

.box >>> th{
    background-color: #eef1f6;
    color: black;
}
main >>> button:nth-of-type(2){
    background-color: red;
    color: white;
}
td{
    cursor: pointer;
}
main{
  width: 92%;
  margin: 20px auto;
  border: 1px solid rgb(211, 208, 208);
}
table{
    width:100%;
    border: 1px solid gray;
    border-collapse: collapse;
    margin: 15px 0;
}
table tr{
    border: gray !important;
   
}
tr td:nth-child(n+2){
    width: 23.6%;
}
.head{
    background-color: #eef1f6;
    
}
.head td{
   padding: 8px 0;
   font-weight: 700;
}
td{
    text-align: left;
    
}
.content{
    position: relative;
}
.content:hover{
    background-color: rgb(250, 250, 250);
}
.content td{
    height: 50px;
    line-height: 50px;
    /* text-align: left; */
    border-top: 1px solid #ebeff3;
}
td button{
    border: none;
    outline: none;
    padding: 2px 5px;
    border-radius: 6px;
    margin: 0 5px;
    border: 1px solid gainsboro;
    background-color: white;
}
.jian{
    width: 50px;
    padding: 0 12px;
    /* position: absolute; */
    /* margin-left: 30px; */
    /* margin-right: 30px; */
}
.fenye{
    display: flex;
   margin: 15px auto;

}
.fenye p{
 padding: 2px 3px;
    margin:0 5px;
    border: 1px solid gray;
}
.fenye ul{
    display: flex;
}
.fenye li{
    padding: 5px 8px;
    border: 1px solid gray;
    margin: 0 2px;
}

section{
  width: 100%;
  height: 100vh;
  position:fixed;
  top: 0;
  left:0;
  background-color: rgba(48, 37, 37, 0.192);
}

section>.bian{
  width: 50%;
  height: 100px;
  background-color: white;
  text-align: center;
  line-height: 100px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  padding: 20px;
  border-radius: 3px;
  /* margin-left: 100px; */
}
section >>> img{
  width: 100%;
  height: 100%;
}
ul{
  width:100%;

}
ul>li{
  width:100%;
  display:flex;
   justify-content: space-between;
    align-items: center;
     border-bottom:1px dotted gray;
}
li>img{
  width:50px;
  height:50px;
  border-radius:10px;
  margin:5px 0;
 
}
</style>